import {useCallback, useState} from 'react';
import {Empty, GridThree, Header, ObserverView} from '../../../components';
import {BindItem} from '../../../mobx/home';
import {getItem} from '../../../utils';
import {dpw12, HISTORY_LIST} from '../../../constants';
import {postReadRecords} from '../../../services';
import {FlatList, View} from 'react-native';
import {useFocusEffect} from '@react-navigation/native';

const ViewHistory = ({navigation}: any) => {
  const [data, setData] = useState<BindItem[]>([]);

  // 获取列表数据
  useFocusEffect(
    useCallback(() => {
      getItem(HISTORY_LIST).then((arr: string[]) => {
        postReadRecords({
          PageIndex: 1,
          PageSize: 100,
          ArticleIdList: arr || [],
        })
          .then((res: any) => {
            if (Array.isArray(res?.Data)) {
              setData(res.Data);
            } else {
              throw new Error('');
            }
          })
          .catch(() => {});
      });
    }, []),
  );

  const _renderItem = () => {
    return <GridThree list={data} navigation={navigation} type={1} />;
  };

  return (
    <ObserverView style={{flex: 1}} themeStyle={{backgroundColor: 'color_12'}}>
      <Header title="viewHistory" navigation={navigation} isCenter />
      <View style={{flex: 1}}>
        {Array.isArray(data) && data.length > 0 ? (
          <FlatList
            style={{flex: 1, paddingHorizontal: dpw12, paddingVertical: dpw12}}
            data={[{BID: 1}]}
            renderItem={_renderItem}
            keyExtractor={it => `${it.BID}`}
          />
        ) : (
          <Empty type="history" />
        )}
      </View>
    </ObserverView>
  );
};

export default ViewHistory;
